<template>
  <div>
    <!-- 采用标签的形式 -->
     <!-- <message msgType="error" v-if="errorMeg.status"  :message="errorMeg.message"></message> -->
     <Loader v-if="isLoading" text="数据加载中..." background="rgba(0, 0, 0, 0.5)" />
      <Form></Form>
  </div>
</template>

<script lang='ts'>
/* 登录页面加loading */
import {defineComponent,computed,watch} from 'vue'
import Form from '@/components/form/Form.vue'
import store from '@/store/index'
// import Message  from '@/components/Message/Message.vue' // 采用标签的形式
import createMessage from '@/hooks/createMessage' // 采用函数调用的形式
import Loader from '@/components/Loader/Loader.vue'
export default defineComponent({
  components: {
    Form,
    Loader,
    // Message
  },
  setup(props) {
     const isLoading = computed(()=>store.state.isLoding)
     const errorMeg = computed(() => store.state.error)

     watch(()=>errorMeg.value.status,()=> {
       const {message,status} = errorMeg.value
       if (message && status) {
         createMessage(message,'error')
       } 
     })
     return {
       isLoading,
       errorMeg
     }
  }
})
</script>

<style>

</style>